CSS 三角形绘制方法主要是利用：transparent（透明）
transparent
用来指定全透明色彩。
transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。
在CSS2中，border-color也开始接受transparent作为参数值，《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。
在CSS3中，transparent被延伸到任何一个有color值的属性上。
我们可以想象下一个正方形
去掉（隐藏-》透明）画X的部分就是我们需要的
上三角：左右隐藏，给border-bottom添加值1
2
3
4
5
6
7
8
div.triangle-up {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-bottom:5px solid #FFC90D;
}
下三角：左右隐藏，给 border-top添加值1
2
3
4
5
6
7
8
div.triangle-down {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #FFC90D;
}
右三角：上下隐藏，给 border-left添加值1
2
3
4
5
6
7
8
div.triangle-right {
width:0px;
height:0px;
border-bottom:5px solid transparent;
border-top:5px solid transparent;
border-left:5px solid #FFC90D;
}
左三角：上下隐藏，给 border-right添加值1
2
3
4
5
6
7
8
div.triangle-right {
width:0px;
height:0px;
border-bottom:5px solid transparent;
border-top:5px solid transparent;
border-right:5px solid #FFC90D;
}
如果对您有所帮助或者对博主有更多的话说，欢迎你去我的GitHub留下一个您的start和issues